<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>网点人员-添加人员</title>

    <link href="../../../css/user/setting.css" rel="stylesheet"/>
    <link href="../../../css/mui.min.css" rel="stylesheet"/>
    <link href="../../../css/common.css" rel="stylesheet"/>
    <link href="../../../css/mui.poppicker.css" rel="stylesheet"/>

    <script src="../../../js/vue.min.js"></script>
    <script src="../../../js/mui.min.js"></script>
    <script src="../../../js/mui.poppicker.js"></script>
    <script src="../../../js/mui.picker.min.js"></script>
    <script src="../../../js/fastclick.js"></script>
    <script src="../../../js/api.js"></script>
    <script src="../../../js/common.js"></script>
    <script src="../../../js/vue-common.js"></script>
    <style>
        .contact-user.left {
            width: 30%;
            color: #333;
            font-size: 1.3rem;
        }

        .contact-user.right {
            width: 70%;
            color: #999;
            font-size: 1.4rem;
            text-align: left;
        }

        input.xlb-input {
            border: none;
            margin: 0;
            font-size: 1.4rem;
            color: #333;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="header-nav">
        <span>添加人员</span>
        <div class="icon"><img src="../../../img/common/btn_back.png" alt=""></div>
    </div>

    <div class="container setting">
        <div class="card-box li">

            <div class="xlb-li">
                <div class="contact-user left">姓名</div>
                <div class="contact-user right">
                    <input v-model="form.name" type="text" class="xlb-input" placeholder="请输入人员姓名">
                </div>
            </div>

            <div class="xlb-li">
                <div class="contact-user left">性别</div>
                <div class="contact-user right">
                    <ls-single-select :type-map="sexMap" v-model="form.sex" style="padding-top: 0"></ls-single-select>
                </div>
            </div>

            <div class="xlb-li">
                <div class="contact-user left">电话（账号）</div>
                <div class="contact-user right">
                    <input v-model="form.phone" type="number" class="xlb-input" placeholder="请输入电话或账号">
                </div>
            </div>

            <div class="xlb-li">
                <div class="contact-user left">密码</div>
                <div class="contact-user right">
                    <input v-model="form.password" type="password" class="xlb-input" placeholder="请输入密码">
                </div>
            </div>


            <!--<div class="xlb-li">-->
            <!--<div class="contact-user left">所在单位</div>-->
            <!--<div class="contact-user right">-->
            <!--<div id='showUserPicker' style="height: 4rem;"></div>-->
            <!--&lt;!&ndash;<img src="../../../img/common/btn_more.png" alt="">&ndash;&gt;-->
            <!--</div>-->

            <!--</div>-->

        </div>
        <div  @touchstart="addOrder" class="xl-btn long no-shadow">提交</div>
    </div>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            sexMap: {
                '0': '男',
                '1': '女',
            },
            submitFlag: false,
            //表单参数
            form: {
                name: '',
                sex: '',
                phone: '',
                password: '',
                orgId: ''
            }
        },
        methods: {
            doSubmit: function () {
                mui.back();
            },
            //生成订单
            addOrder: function () {
                if (!this.form.name) {
                    return mui.toast("请填写姓名");
                }
                if (!this.form.sex) {
                    return mui.toast("请选择性别");
                }
                if (!this.form.phone) {
                    return mui.toast("请填写电话（账号）");
                }
                if (!this.form.password) {
                    return mui.toast("请填写密码");
                }
                if (!this.form.orgId) {
                    return mui.toast("请选择机构");
                }
                if (this.submitFlag) {
                    return;
                }
                vm.doSaveOrder(this.form);
            },
            doSaveOrder: function (params) {
                this.submitFlag = true;
                this.btnTitle = '提交中',
                    Resource.post(USER_NET_ADD_USER_API, params, function (res) {
                        mui.toast('添加成功！')
                        vm.showFlg = false;
                        redirectMainPage('pages/user/netperson/index.html')
                    })
            }
        }
    });

    function getOrgList() {
        Resource.get(USER_ORG_LIST_API, {}, function (res) {
            console.log(JSON.stringify(res));
            var _getParam = function (obj, param) {
                return obj[param] || '';
            };
            //普通示例
            var userPicker = new mui.PopPicker();
            var listUser = [];
            for (var index in res) {
                listUser.push({
                    value: res[index]['id'],
                    text: res[index]['name']
                })
            }
            vm.form.orgId = listUser[0]['value'];
        })
    }

    mui.plusReady(function () {
        getOrgList();
    });

    mui('body').on('toggle', '#contactSelect', function () {
        vm.form.contactFlag = event.detail.isActive

    })
</script>
</body>
</html>